<template>
  <div>
    <div class="cp-logo" :logoUrl="logoUrl">
      <img :src="compLogo" class="company-logo" alt="logo" title="logo">
    </div>
    <div class="cp-name" :companyName="companyName">
      <span class="company-name">{{ compName }}</span><span>数字化工厂</span>
    </div>
  </div>
</template>

<script>
import { getCompanyInfo } from '@/api/conf'

export default {
  name: 'CompanyLogo',
  props: {
    logoUrl: {
      type: String,
      required: false,
      default: require('@/assets/public_images/jyt-logo.png')
    },
    companyName: {
      type: String,
      required: false,
      default: '佳运通'
    }
  },
  data() {
    return {
      compName: '',
      compLogo: '',
      preStr: 'data:image/jpeg;base64,' // logo为base64字符串，需在前面拼接该段字符才能正确显示
    }
  },
  watch: {
    logoUrl: {
      immediate: true,
      handler: function(newval, oldval) {
        this.logoUrl = newval
        this.compLogo = this.logoUrl
      }
    },
    companyName: {
      immediate: true,
      handler: function(newval, oldval) {
        this.companyName = newval
        this.compName = this.companyName
      }
    }
  },
  created() {
    this.getCompany()
  },
  methods: {
    getCompany() {
      getCompanyInfo().then(res => {
        if (res.data !== null) {
          this.compName = res.data.name === '' ? '佳运通' : res.data.name
          this.compLogo = res.data.pictureurl === '' ? require('@/assets/public_images/jyt-logo.png') : this.preStr + res.data.pictureurl
        } else {
          this.compName = '佳运通'
          this.compLogo = require('@/assets/public_images/jyt-logo.png')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
    .cp-logo{
        height: 100%;
        padding: 5px 10px;
        img {
            height: 100%;
        }
    }
    .cp-name{
        line-height: 50px;
        font-size: 30px;
        font-weight: bold;
        letter-spacing: 2px;
        color: #fff;
        text-shadow: 1px 1px 0px rgb(0 149 140), 1px 2px 0px rgb(0 149 160), 1px 3px 0px rgb(0 149 180), 1px 4px 0px rgb(0 149 200), 1px 5px 0px rgb(0 149 227);
    }
</style>
